<template>
  <div>
    <el-row :gutter="20">
      <div v-for="product in products" :key="product.id">
        <el-col :span="8">
          {{ product.title }} - {{ product.price | currency }}
          <br />
          <el-button type="primary"
            :disabled="!product.inventory"
            @click="addProductToCart(product)"
          >
            Add to cart
          </el-button>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  computed: mapState({
    products: state => state.products.all
  }),
  methods: mapActions(`cart`, [`addProductToCart`]),
  created() {
    this.$store.dispatch(`products/getAllProducts`);
  }
};
</script>
